<template>
	<view class="page">
		<view class="header">
			<view class="header-1"><u-icon name="arrow-leftward" color="323233" size="18" @click="toGoBack()"></u-icon>
			</view>
			<view class="header-2">
				<image src="/static/logo.png"></image>
				教育培训系统
			</view>
			<view class="header-3"></view>
		</view>
		<view class="content">
			<view class="t1">专题名称专题名称</view>
			<view class="t2">
				<view class="item" v-for="(item,index) in trainList" :key="index">
					<view class="title">资料名称最多显示字数十八个字其余字用…</view>
					<view class="state">
						<view class="s1">待学习</view>
						<view class="s2">
							<view class="text">去学习</view>

							<image src="/static/tab/arrowRight.png" class="right"></image>

						</view>
					</view>
					<view class="line"></view>
					<view class="content2">
						<view class="logo">

						</view>
						<view class="content22">
							<view class="title">这里是简介内容这里是简介内容这里是简介内容</view>
							<view class="btn">自测</view>
						</view>
					</view>
				</view>
			</view>

		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				trainList: [{}, {}, {}]
			}
		},
		methods: {
			toGoBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;


		background: #F6F8FC;


		.header {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			display: flex;

			.header-1 {
				margin: 30rpx 0 0 38rpx;
				justify-content: center;
				align-items: center;

			}

			.header-2 {
				flex: 10;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}

			.header-3 {
				flex: 1;
			}
		}

		.content {
			display: flex;
			flex-direction: column;

			.t1 {
				margin: 32rpx 0 0 32rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #323233;
				line-height: 48rpx;
				text-align: left;
				font-style: normal;
			}

			.t2 {
				margin: 32rpx 0 0 32rpx;
				display: flex;
				flex-direction: column;
				gap: 32rpx;

				.item {
					width: 686rpx;
					height: 372rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					display: flex;
					padding: 32rpx 0 0 0;
					flex-direction: column;

					align-items: center;

					.title {
						width: 608rpx;
						height: 44rpx;
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

						font-size: 32rpx;
						color: #323233;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
					}

					.state {
						width: 608rpx;
						position: relative;
						display: flex;
						justify-content: center;



						.s1 {
							position: absolute;
							left: 0;
							top: 16rpx;
							width: 88rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							height: 40rpx;
							background: #FF7E00;
							border-radius: 4rpx;
							font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 32rpx;
							text-align: left;
							font-style: normal;
						}

						.s2 {
							position: absolute;
							right: 0;
							top: 16rpx;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;

							.text {
								font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
								font-weight: 400;
								font-size: 28rpx;
								color: #969799;
								line-height: 40rpx;
								text-align: center;
								font-style: normal;
							}

							.right {
								width: 22rpx;
								height: 22rpx;

							}

						}

					}

					.line {
						margin: 80rpx 0 0 0;
						width: 622rpx;
						height: 2rpx;
						background: #EBEDF0;
					}

					.content2 {
						display: flex;
						flex-direction: row;
						margin: 24rpx 0 0 0rpx;
						position: relative;
						justify-content: center;



						.logo {
							width: 292rpx;
							height: 146rpx;
							background-color: #969799;


							border-radius: 16rpx 16rpx 16rpx 16rpx;
						}

						.content22 {
							display: flex;
							flex-direction: column;
							margin: 0 0 0 24rpx;



							.title {
								width: 306rpx;
								height: 64rpx;
								font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
								overflow: hidden;
								/* 隐藏超出元素范围的内容 */
								white-space: nowrap;
								/* 防止文本换行 */
								text-overflow: ellipsis;
								/* 显示省略号 */



							}

							.btn {
								position: absolute;
								width: 176rpx;
								height: 64rpx;
								background: #F0EFF4;
								border-radius: 28rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
								font-weight: 400;
								font-size: 28rpx;
								color: #8B8A92;
								line-height: 40rpx;
								right: 0;
								bottom: 0;
								text-align: right;
								font-style: normal;
							}

						}

					}


				}
			}


		}


	}
</style>